<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<!-- 	<view class="personnel" :style="{'height':tarbarHeight+'px'}">
			<image @click="backOnClick" src="../../../static/left_arrow.png" class="backImg" mode=""></image>
			<text class="title">{{personnelInfo}}</text>
		</view> -->

		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<!-- 提示信息 -->
		<view class="tipsInfo">
			<text class="tipsInfoStyle">{{tipsInfo}}</text>
			<text class="updateInfoStyle">{{updateInfo}}</text>
		</view>


		<!-- 列表标题 -->
		<view class="titleStyle">
			<text class="titleStyleNum">序号</text>
			<text class="titleStyleSerial">尺码编号</text>
			<text class="titleStyleSerial">尺码排序</text>
			<text class="titleStyleSerial">代码</text>
			<text class="titleStyleName">尺寸名称</text>
		</view>


		<scroll-view scroll-y="true" class="titleStyleTitle">
			<!-- 列表内容 -->
			<view v-for="(item,index) in listData" @click="listItemClick(item)">
				<view class="titleStyleList" v-if="index%2==0">
					<text class="titleStyleNumList">{{item.num}}</text>
					<text class="titleStyleSerialList">{{item.code}}</text>
					<text class="titleStyleNameList">{{item.serial}}</text>
					<text class="titleStyleNameList">{{item.title}}</text>
					<text class="titleStyleNameList">{{item.name}}</text>


				</view>
				<view class="titleStyleListElse" v-if="index%2!=0">
					<text class="titleStyleNumList">{{item.num}}</text>
					<text class="titleStyleSerialList">{{item.code}}</text>
					<text class="titleStyleNameList">{{item.serial}}</text>
					<text class="titleStyleNameList">{{item.title}}</text>
					<text class="titleStyleNameList">{{item.name}}</text>


				</view>

				<view class="line"></view>
			</view>

		</scroll-view>


		<view class="loginContent">

			<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>



		<view>

			<!-- 点击列表弹出-->
			<uni-popup ref="popupBag" type="bottom">
				<view class="bagDetail">
					<text class="bagDetailUpadte" @click="updateData()">修改</text>
					<view class="lineBg"></view>
					<!-- <text class="bagDetailDelete" @click="AddData()">新增</text>
						<view class="lineBg"></view> -->
					<text class="bagDetailDelete" @click="deleteData()">删除</text>
					<view class="lineBg1"></view>
					<text class="bagDetailCancel" @click="close()">取消</text>
				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
	

	
	export default {
		components: {
			MyNav,
			bgImage
			
		},
		data() {
			return {
				title: '尺码组',
				isback: true,


				personnelInfo: '尺码组',
				tops: 0,
				height: 0,
				tarbarHeight: 0,
				tipsInfo: 'Tips：点击对应行可进行修改或删除操作',
				updateInfo: '刷新',
				login: '新增',


				listData: [{
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					},
					{
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					}, {
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					}, {
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					}, {
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					}, {
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					}, {
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					}, {
						num: '1',
						serial: '333',
						title: "item1",
						code: '4444',
						name: '名称名称名'
					},
				],

				// 列表单个数据
				listItemData: {},

				


			}
		},
		
		onLoad() {
			
		
		},
		
		methods: {
			
		
			// 新增数据
			AddData() {
				console.log('新增数据');
				uni.navigateTo({
					url: '/subPack/sizeGroup/sizeGroupAdd/sizeGroupAdd',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 修改数据
			updateData() {
				console.log('修改数据', this.listItemData);
				uni.navigateTo({
					url: '/subPack/sizeGroup/sizeGroupUpdate/sizeGroupUpdate',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

				this.close()

			},
			//删除数据
			deleteData() {
				console.log('删除数据', this.listItemData);

			},

			// 打开弹框
			open(e) {
				console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},
			// 列表点击事件
			listItemClick(e) {

				/* uni.navigateTo({
					url: '/pages//subPack/process/processTemplateUpdate/processTemplateUpdate',
					success: res => {},
					fail: () => {},
					complete: () => {}
				}); */
				this.open(e)
			},

			addClick() {

			},

			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				console.log('点击返回');
			}
		},
		onReady() {
			// 获取标题栏和状态栏高度
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.tarbarHeight = this.tops + this.height;
				}
			})

		}
	}
</script>

<style>
	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;



	}

	.lineBg1 {
		width: 100%;
		height: 20rpx;
		background: #EEEEEE;
	}

	.bagDetailCancel {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;



	}

	.bagDetailDelete {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: red;

	}

	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetail {
		width: 100%;
		height: 380rpx;

		border-radius: 50rpx 50rpx 0 0;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		background-color: #45A8FF;

	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		width: 550rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		bottom: 60rpx;
		position: absolute;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}


	.titleStyleNumList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleSerialList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleNameList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;



	}

	.titleStyleNum {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleSerial {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleName {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;


		font-style: normal;



	}

	.line {
		width: 690rpx;
		height: 1rpx;
		background: #F9FCFF;



	}

	.titleStyleTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 690rpx;
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 30rpx 30rpx;


	}

	.titleStyleListElse {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #F9FCFF;
	}

	.titleStyleList {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		width: 690rpx;
		height: 80rpx;

	}

	.titleStyle {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 42rpx
	}


	.tipsInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 40rpx;
	}

	.tipsInfoStyle {
		font-size: 24rpx;
		color: #FF4E00;
		line-height: 80rpx;
		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
		margin-left: 30rpx;
	}

	.updateInfoStyle {
		width: 100rpx;
		height: 50rpx;
		background: #0081FF;
		border-radius: 30rpx;
		margin-right: 30rpx;
		font-size: 24rpx;
		align-items: center;
		color: white;
		display: flex;
		justify-content: center;

	}





	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
</style>